<!-- 用户就诊预约界面 -->
<template>
    <div class="MyContainer">
        <div class="mt-4">
            <el-input style="width: 300px;" v-model="input_name" placeholder="请输入姓名" class="input-with-select"></el-input>
            <el-button type="primary" :icon="Search" style="margin-left:10px" @click="query()">查询</el-button>
        </div>

        <el-table :data="tableData" style="margin-top:25px" header-cell-class-name="table-header">
            <el-table-column prop="docId" label="ID" width="60" />
            <el-table-column prop="docName" label="姓名" width="120" />
            <el-table-column prop="docGender" label="性别" width="90" />
            <el-table-column prop="docPhonenum" label="电话号码" width="180" />
            <el-table-column prop="docHospital" label="所属医院" width="180" />
            <el-table-column prop="docSecdepartment" label="科室" width="180" />
            <el-table-column prop="docSpeciality" label="擅长领域"  width="140"/>
            <el-table-column prop="isMyDoc" label="签约" :filters="[{ text: '已签约', value: '已签约' },
                                                                          { text: '未签约', value: '未签约' },]"
                          :filter-method="filterTag" filter-placement="bottom-end">
              <template #default="scope">
              <el-tag :type="scope.row.isMyDoc === '已签约' ? '' : 'success'" disable-transitions>{{ scope.row.isMyDoc }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="处理操作" width="200">
                <template #default="scope">
                    <el-button link type="primary"  @click="applyDoc(scope.row.docId,scope.$index);dialogFormVisible = true">点击就诊预约</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog v-model="dialogFormVisible" title="请按要求填写就诊预约申请" draggable open="applyDoc">
            <el-form :model="form">
                <el-form-item label="预约就诊医生" :label-width="formLabelWidth">
                    <!-- <el-input v-model="form.name" autocomplete="off" /> -->
                    <span>{{ form.docName }}</span>
                </el-form-item>
                <el-form-item label="预约就诊时间" :label-width="formLabelWidth">
                    <div class="block">
                        <el-date-picker v-model="input_time" type="datetime" placeholder="请选择就诊时间"/>
                    </div>
                </el-form-item>
                <el-form-item label="病情简介" :label-width="formLabelWidth">
                    <el-input v-model="input_ill" maxlength="100" placeholder="请简述病情" show-word-limit type="textarea" autocomplete="off"/>
                </el-form-item>
                <!-- <el-form-item label="Zones" :label-width="formLabelWidth">
                    <el-select v-model="form.region" placeholder="Please select a zone">
                        <el-option label="Zone No.1" value="shanghai" />
                        <el-option label="Zone No.2" value="beijing" />
                    </el-select>
                </el-form-item> -->
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="Confirm(form.index);dialogFormVisible = false">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { reactive,ref } from 'vue';
import { Search} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { userappVisit,getAlldoctorInfo,acceptReqId,getAdmDocInfo } from '../../api/manager';

const input_time = ref('')

const input_name = ref('')
const input_ill = ref('')
const radio1 = ref('1')
const value = ref('')

const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

interface formType{
    index?:number,
    docId:string,
    docName?: string,
    appReqTime: string,
    appReqIllness: string
}

const form = reactive<formType>({
    index:0,
    docId:'',
    docName: '',
    appReqTime: '',
    appReqIllness: '',
})

interface TableItem {
    docId:string,
    docName:string,
    docHospital:string,
    docSecdepartment:string,
    docPhonenum:string,
    docGender:string,
    docSpeciality:string,
    isMyDoc:string,
}

const tableData = ref<TableItem[]>([])

const filterTag = (value, row) => {
return row.isMyDoc === value
}

const getData = () =>{
  //tableData
  getAlldoctorInfo().then(res=>{
    if(res.code==200){
        tableData.value=res.data
        for(var i=0;i<res.data.length;i++){
            var doc=res.data[i]
            if(doc.isMyDoc=='0'){
                tableData.value[i].isMyDoc='未签约'
            }else{
                tableData.value[i].isMyDoc='已签约'}
        }     
     }  
  }).catch(err => {console.log('请求失败',err)})
}
getData();

//查询--finish
const query = () => {
    const docName=input_name.value
    getAlldoctorInfo().then(res =>{
        if(res.code == 200){
            //console.log(res)
            tableData.value = []
            tableData.value=new Array()
            for(var i=0;i<res.data.length;i++){
                var doc=res.data[i]
                //console.log(doc)
                if(doc.docName.includes(docName)){
                    if(doc.isMyDoc==0){
                    tableData.value.push({
                        docId:doc.docId,
                        docName:doc.docName,
                        docHospital:doc.docHospital,
                        docSecdepartment:doc.docSecdepartment,
                        docPhonenum:doc.docPhonenum,
                        docGender:doc.docGender,
                        docSpeciality:doc.docSpeciality,
                        isMyDoc:'未签约',
                    })
                    }else{tableData.value.push({
                        docId:doc.docId,
                        docName:doc.docName,
                        docHospital:doc.docHospital,
                        docSecdepartment:doc.docSecdepartment,
                        docPhonenum:doc.docPhonenum,
                        docGender:doc.docGender,
                        docSpeciality:doc.docSpeciality,
                        isMyDoc:'已签约',})
                    }
                } 
            }
        }  
  }).catch(err => {console.log('请求失败',err)})
}

const applyDoc = (id,index) => {
    form.docName=tableData.value[index].docName
    form.index=index
}

//确定
const Confirm = (index) => {
    ElMessageBox.confirm(
        '请确定是否预约该医生就诊',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        form.docId=tableData.value[index].docId
        const tmp=JSON.stringify(input_time.value)
        form.appReqTime=tmp.slice(1,11)+' '+tmp.slice(13,20)
        form.appReqIllness=input_ill.value
        delete form.index
        delete form.docName
        if(form.appReqTime==''||form.appReqIllness==''){
            ElMessage({
                type: 'info',
                message: '请填写完整',
            })
        }else{
        userappVisit(JSON.stringify(form)).then(res=>{
            ElMessage({
                type: 'success',
                message: res.msg,
            })
            //console.log("form",JSON.stringify(form))
        }).catch(err=>{console.log('fail')})}
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '取消操作',
        })
    })
}

</script>

<style scoped>
.mt-4 {
    float: left;
    margin-bottom: 40px;
    margin-top: 30px;
}

</style>
